<template>
  <div>
    <van-nav-bar title="详情页" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <h3 class="mark">{{items.title}}</h3>
      <span class="author mark">{{items.author}}-{{items.date}}</span>
      <div class="markdown-body mark" v-html="contents"></div>
      <Collect class="mark" :id="id"></Collect>
      <Count class="mark" :times="items.time" :id="this.id"></Count>
      <Discuss class="mark" :bdid="id"></Discuss>
    </div>
  </div>
</template>

<script>
import Count from "../components/details/Count";
import Collect from "../components/details/Collect";
import Discuss from "../components/details/Discuss";
import { mapState, mapMutations, mapActions } from "vuex";
import marked from "marked";
import "github-markdown-css";
import { getStorage } from "../utils/storage";
export default {
  props: ["id"],
  name: "detail",
  data() {
    return {};
  },
  components: {
    Count,
    Collect,
    Discuss
  },
  methods: {
    ...mapActions("msbd", ["getItem"]),
    onClickLeft() {
      this.$router.back();
    }
  },
  computed: {
    ...mapState("msbd", ["items"]),
    contents() {
      return marked(this.items.content || "");
    }
  },
  mounted() {
    this.getItem(this.id);
  }
};
</script>

<style lang="scss" scoped>
.author {
  display: flex;
  justify-content: flex-end;
  color: gray;
  margin-top: -5px;
  font-size: 14px;
  margin-right: 20px;
}
.mark {
  padding:0 15px;
  // padding: 10px !important;
  // width: 90%;
  // margin: 0 auto;
}
.content {
  position: absolute;
  top: 46px;
  bottom: 0;
  overflow-y: auto;
  width: 100%;
}
</style>